<template>
    <div>
        <el-button @click="search">开始搜索！</el-button>
    </div>
    <el-dialog v-model="configDialogVisible">
        <PathsConfig :config-item-name="'git_repositories_indexing/search_paths'" />
    </el-dialog>
    <el-button :icon="Setting" @click="configDialogVisible = true"></el-button>
    <div style="height:90vh; width:100">


        <el-table ref="elTableRef" :data="tableData" style="width: 100%" row-key="id"
            :tree-props="{ children: 'remote_branches', hasChildren: 'hasChildren' }">
            <el-table-column prop="id" label="Index" width="100" />
            <el-table-column label="Local Path" width="380">
                <template #default="scope">
                    {{ scope.row.local_path }}
                    <el-button size="small" @click="handleOpenVSCode(scope.$index, scope.row)">
                        <template #icon>
                            <SvgIcon name="vscode"></SvgIcon>
                        </template>
                    </el-button>

                </template>
            </el-table-column>
            <el-table-column prop="remote" label="Remote" width="180" />
            <el-table-column prop="url" label="URL" width="380" />
            <el-table-column label="操作" width="160">
                <template #default="scope">
                    <el-button size="small" @click="handleOpenRepo(scope.$index, scope.row)">
                        Open Repo
                    </el-button>

                </template>
            </el-table-column>

        </el-table>
    </div>
</template>
<script lang="ts" setup>
import { createWebSocket } from "@/requests";
import { ElButton, ElNotification, ElTable } from "element-plus"
import { ref, onMounted, nextTick } from "vue";
import { Setting } from "@element-plus/icons-vue"
import PathsConfig from "../common/PathsConfig.vue";
import { request } from "@/requests/base";
import SvgIcon from '../common/SvgIcon.vue'
import ids from 'virtual:svg-icons-names'
console.log(ids)

interface RecordType {
    id: number
    local_path: string,
    // hasChildren?: boolean,
    remote_branches?: RecordType[]
    remote?: string
    url?: string
}
const elTableRef = ref(null)
const configDialogVisible = ref(false)
const tableData = ref<RecordType[]>([{
    "id": 3,
    "local_path": "C:\\Users\\houzh\\Developing\\ixmp4",
    "remote_branches": [
        {
            "id": 1,
            "local_path": "C:\\Users\\houzh\\Developing\\ixmp4",
            "remote": "origin",
            "url": "https://github.com/iiasa/ixmp4.git"
        }
    ],
    // "hasChildren": true,
    remote: "zzzz",
    url: "https://github.com/iiasa/ixmp4.git"
},])
const search = async () => {
    createWebSocket(`ws://localhost:8888/api/git_repo_search/run_repo_search`, (msg: {
        type: string,
        data: RecordType[]
    }) => {
        console.log(msg)
        if (msg.type === "initial") {
            tableData.value = []
        }
        if (msg.type === "update" || msg.type === "initial") {
            for (const record of msg.data) {
                tableData.value.push(record)
            }
        } else {
            console.log(msg)
        }

    })
}

const prefixes: { [key: string]: string } = {
    "git@gitee.com": "https://gitee.com"
};

function convertBranchUrl(branchUrl: string): string {
    if (branchUrl.startsWith("http")) {
        // 如果URL以http开头，则不做任何操作
        return branchUrl;
    } else if (Object.keys(prefixes).some((prefix) => branchUrl.startsWith(prefix))) {
        // 如果URL以prefixes中的某个键开头
        const [prefixKey, ...rest] = branchUrl.split(":");
        const base_url = rest.join(":"); // Join the rest of the URL back together
        return prefixes[prefixKey] + "/" + base_url;
    } else if (branchUrl.startsWith("git@")) {
        // 如果URL以git@开头，则替换为https://
        return branchUrl.replace(":", "/").replace("git@", "https://");
    } else {
        console.log("Cannot recognize such prefix");
        return branchUrl; // 或者可以选择抛出错误
    }
}


const handleOpenRepo = (index: number, row: RecordType) => {
    console.log(row)
    if (row.url == null) {
        ElNotification.warning({ "message": "No remote repository found for this local repository. Please add a remote repository first." })
        return
    }
    window.open(convertBranchUrl(row.url), '_blank');
}

const handleOpenVSCode = async (index: number, row: RecordType) => {
    const ret = await request.post("/api/third_party_software/vscode", { "folder": row.local_path })
}
</script>
<style>
/* .el-scrollbar__view {
   display: block!important;
} */
</style>